<template>
    <div>
        <div class="main_operation">
            <div class="operation_left">
              <a-button v-if="userInfo.is_root === 1" class="mr10" type="danger" @click="batchDelBtn">批量删除</a-button>
            </div>
            <div class="operation_right">
                <a-select allowClear class="mr5" style="width: 200px" v-model="formList.equipment_id" placeholder="设备名称">
                    <a-select-option v-for="item in equipmentData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
                </a-select>
                <a-range-picker style="width: 220px" class="mr5" @change="onDateChange" />
                <a-button class="mr10" type="primary" @click="()=>{formList.page = 1;changeData()}">搜索</a-button>
                <!-- <a-button class="mr10" type="primary">下载数据</a-button> -->
                <!-- <a-button type="primary" @click="changeData()">刷新</a-button> -->
                <a-button type="primary" @click="downloadBtn">简报记录导出</a-button>
            </div>
        </div>
        <div class="main">
            <a-table :pagination="false"
              :loading="tableLoad"
              :columns="Fields"
              :rowSelection="{ selectedRowKeys: selectedRowKeys, columnWidth: 40, onChange: onSelectChange }"
              :dataSource="dataLists.data"
              :rowKey="record => record.id"
              :scroll="{x: 1350, y: 500 }">
            </a-table>
            <div class="pageBox">
                <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page" :defaultCurrent="1" @change="pageChange" />
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Vue from 'vue';
import { USER } from '@/store/mutation-types';

export default {
  name: 'Record',
  data() {
    return {
      /* 通用模块 */
      // 列表
      tableLoad: false, // 列表loading状态
      formList: { // 列表信息
        page: 1,
      },
      selectedRowKeys: [], // 勾选的id
      /* 通用模块end */
    };
  },
  computed: {
    userInfo() {
      return Vue.ls.get(USER);
    },
    ...mapState({
      Fields: state => state.briefingRecord.Fields,
      dataLists: state => state.briefingRecord.dataLists,
      requestCode: state => state.briefingRecord.requestCode,
      equipmentData: state => state.equipment.equipmentData, // 设备名称信息
    }),
  },
  mounted() {
    this.equipmentAll();
    this.changeData();
  },
  methods: {
    /* 通用模块 */
    ...mapActions({
      getLists: 'briefingRecord/getLists', // 列表
      dataDel: 'briefingRecord/dataDel', // 删除
      equipmentAll: 'equipment/equipmentAll', // 设备名称信息
      alarmRecord: 'equiRegister/alarmRecord', // 导出报警列表
    }),
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    // 批量删除
    batchDelBtn() {
      if (this.selectedRowKeys.length <= 0) {
        this.$warning({
          title: '提示',
          content: '请先勾选需要删除的设备',
        });
        return false;
      }
      const _this = this;
      const idArr = this.selectedRowKeys;
      console.log(idArr);
      this.$confirm({
        title: '您确定要删除勾选的设备吗?',
        content: '删除后将不可恢复,请仔细核对!',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.dataDel(idArr);
          _this.changeData();
        },
      });
    },
    downloadBtn() {
      this.alarmRecord(this.formList).then((res) => {
        // console.log(res);
        const execlName = '简报记录导出';
        if (res.data.type == 'application/json') {
          this.$message.error('查询数据为空');
        } else {
          const blob = new Blob(
            [res.data], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
            },
          );
          const aEle = document.createElement('a'); // 创建a标签
          const href = window.URL.createObjectURL(blob); // 创建下载的链接
          aEle.href = href;
          aEle.download = execlName; // 下载后文件名
          document.body.appendChild(aEle);
          aEle.click(); // 点击下载
          document.body.removeChild(aEle); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象

          this.$message.success('导出成功');
        }
      });
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 1000);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */
    
    // 详情
    details(item) {
      this.$router.push({
        path: `/alert/detail/${item.id}`,
      });
    },
    onDateChange(date, dateStrings) {
      console.log(date, dateStrings);
      this.formList.created_start = dateStrings[0];
      this.formList.created_end = dateStrings[1];
      if (!date.length) {
        delete this.formList.created_start;
        delete this.formList.created_end;
      }
    },
  },
};
</script>

<style scoped>

</style>
